<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>优惠码</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        /* [v-cloak]{ display:none} */

        .discount-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 12px 12px 0 12px;
            padding: 6px 15px 6px 15px;
            background: #fff;
            font-size: 18px;
            font: 700;
            color: #999;
            border-radius: 4px;
            height: 49px;
        }

        .discount-item .rightItem {
            font-size: 14px;
            font: 400;
        }

        .discount-code {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .unuse {
            margin-left: 8px;
            color: #333;
        }

        .hasUsed {
            margin-left: 8px;
            color: #999;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="discounts-list" v-if="listDiscounts&&listDiscounts.length>0">
            <div class="discount-item" v-for="(item, index) in listDiscounts" :key="index">
                
                <div class="discount-code">
                    <div>{{index+1}}.</div>
                    <div :class="status==0?'unuse':'hasUsed'">{{item.code}}</div>
                </div>
                <div class="rightItem" v-if="discountStatus==0" @click="copy(item.code)">复制</div>
                <div class="rightItem" v-if="discountStatus==1">{{item.useTime | handleTime}}使用</div>
                
            </div>
        </div>

        <div v-else class="collect-empty">
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
            <div>暂无内容～</div>
        </div>
        
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>

    <script>
        apiready = function() {
            var vm = new Vue({
                el: '.app',
                data: {
                    showToast: false,
                    toastText: '',
                    discountStatus: 0,
                    listDiscounts: [],
                    queryParam: {
                        pageNum: 1,
                        pageSize: 10,
                        status: false,
                    },
                    hasNext: false,
                },
                filters: {
                    handleTime(timestamp) {
                        if (!timestamp) {
                            return ''
                        }
                        var date = new Date(timestamp);
                        Y = date.getFullYear();
                        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                        D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
                        // h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
                        // m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                        // s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                        // return Y + '.' + M + '.' + D + ' ' + h + ':' + m + ':' + s
                        return Y + '.' + M + '.' + D + ' '

                    }
                },

                mounted() {
                    this.discountStatus = api.pageParam.status;
                    this.getListUserDiscounts();
                },

                methods: {
                    copy(code) {
                        var clipBoard = api.require('clipBoard');
                        clipBoard.set({
                            value: code
                        }, function(ret, err) {
                            if (ret) {
                                toastMiddle('复制成功');
                                // alert(JSON.stringify(ret));
                            } else {
                                // alert(JSON.stringify(err));
                            }
                        });
                    },
                   popoupClose() {
                       api.sendEvent({
                           name:'hideInstructionsPopup'
                       });
                   },

                   getListUserDiscounts() {
                       var vm = this;
                       vm.queryParam.status = vm.discountStatus==0?false:true;
                       order('getListUserDiscounts')(vm.queryParam, function(ret){
                            vm.hasNext = ret.data.hasNext
                            if(vm.queryParam.pageNum == 1){
                                vm.listDiscounts = ret.data.list
                            }else{
                                vm.listDiscounts = vm.listDiscounts.concat(ret.data.list)
                            }
                       });
                   }
                },
            });

            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function (ret, err) {
                vm.queryParam.pageNum = 1
                vm.getListUserDiscounts()
                api.refreshHeaderLoadDone()
            });
            // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function (ret, err) {
                console.log("上拉加载");
                if (vm.hasNext) {
                    vm.queryParam.pageNum++
                    vm.getListUserDiscounts()
                }
            });
            
        }
    </script>
</body>
</html>